<template>
    <!-- 坐席分配情况弹窗 -->
    <!-- <drag-modal  :visible="visible" :title="modalTitle" @cancel="onModalClose" width="1000px" > -->
        <!-- <div class="form-search-wrapper" style="min-height:200px;"> -->


            <div style="display:flex;flex-wrap:wrap;">
                <a-card size="small" :title="false" v-for="(item,index) in goodsList" style="width:19%;min-width:290px;margin:10px 0% 10px 1%;height:250px">
                    <div class="money-set-wrapper clearfix">
                        <div class="goods-img">
                            <img :src="item.goodsLogoUrl" alt="商品图片">
                        </div>
                        <div class="goods-explain">
                            <div class="margin-bottom-10"> {{item.goodsName}}</div>
                            <div style="font-size:20px">

                                <a-statistic :precision="2" :value="item.price">
                                    <template slot="prefix">
                                        ￥
                                    </template>
                                </a-statistic>
                            </div>
                        </div>
                    </div>

                    <div class="margin-bottom-6">分钟数:  {{item.baseMinutes}}分钟</div>
                    <div class="margin-bottom-6">单&nbsp;&nbsp;&nbsp;价:  {{item.minutePrice}}元/分钟</div>
                    <div class="margin-bottom-6"><span v-if="item.isSetting" style="color:red">友情提示：套餐分钟数仅当月有效</span><div v-else>&nbsp;</div></div>
                    <div style="width:100%;text-align:center;margin-top:20px;">
                        <a-button style="margin:0 auto;width:80%" type="primary" @click="callBack(item)">
                            {{selectButtonTitle}}
                        </a-button>
                    </div>
                </a-card>
            </div>

            <!-- <div class="box-content">
                <div class="box" v-for="(item,i) in goodsList" :key="item.id">
                    <div class="name">
                        <p>{{item.goodsName}}</p>
                    </div>
                    <div class="descriptions">
                        <div class="box-row">
                            <div class="left">价格</div>
                            <div class="right">{{item.price}}元</div>
                        </div>
                        <div class="box-row">
                            <div class="left">分钟数</div>
                            <div class="right">{{item.baseMinutes}}分钟</div>
                        </div>
                        <div class="box-row" v-if="!item.isSetting">
                            <div class="left">单价</div>
                            <div class="right">{{item.minutePrice}}元/分钟</div>
                        </div>
                        <div class="box-row" v-if="item.isSetting">
                            <p style="color:red;">友情提示：套餐分钟数仅当月有效</p>
                        </div>
                    </div>
                    <a-button type="primary" @click="callBack(item)">{{selectButtonTitle}}</a-button>
                </div>
            </div> -->
        <!-- </div> -->
    <!-- </drag-modal> -->
</template>

<script>
import { mapState } from "vuex";
import { pageGoodsSetting } from "@/api/member/goods";

export default {
    data () {
        return {
            visible: false,
            modalTitle:"选择套餐",
            selectButtonTitle:"购买",
            goodsList: [],    //话费商品集合

        };
    },
    created(){
        
    },
    mounted(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        reLoadData(){
            this.pageList();
        },
        onModalOpen(openData){
            Object.assign(this,openData);
            this.visible = true;
            this.reLoadData();
        },
        onModalClose(){
            this.visible = false;
        },
        //获取外呼套餐集合
        pageList () {
            let postData ={
                   size: -1     
            }
            pageGoodsSetting(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    if(data){
                        this.goodsList = data;
                    }
                }
            }).catch(error => { });
        },
        //回调
        callBack(item){
            this.$emit("callBack",item); 
        }
    }
};
</script>

<style lang="less" scoped>
    .box-content{
        padding: 10px 30px;
        display: flex;
        flex-wrap: wrap;
        background-color: #ececec;
        .box{
            width: 250px;
            height: 300px;
            display: flex;
            flex-direction: column;
            margin: 20px;
            background: #fff;
            .name{
                width: 100%;
                height: 98px;
                line-height: 98px;
                text-align: center;
                background: url('~@/assets/base_setting_back.png') no-repeat; 
                font-size: 24px;
                font-weight:700;
                color: white;
                border-radius: 5px 5px 0px 0px;
            }
            .descriptions{
                flex: 1;
                .box-row{
                    display: flex;
                    margin: 20px;
                    .left{
                        width: 120px;
                    }
                    .right{
                        flex: 1;
                    }
                }
                .bt-select{
                    margin-bottom: 10px;
                }
            }
        }
    }
    
    // 头部
    .header{
        padding: 15px 20px;
        .title{
            font-weight: 700;
            font-size: 20px;
        }
        .bt{
            margin-left: 10px;
        }
    }

    .money-set-wrapper {
        border-radius: 4px;
        height: 80px;
        box-sizing: border-box;
        .goods-img {
            width: 60px;
            height: 60px;
            padding-top: 6px;
            float: left;
            img {
                width: 60px;
                height: 60px;
                border-radius: 4px;
            }
        }
        .goods-explain {
            float: left;
            width: 45%;
            margin-left: 10px;
        }
    }

</style>